
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>版本控制与Git工作流 - 学习卡片</title>
      <style>
        body { font-family: sans-serif; background-color: #f0f8ff; color: #333; display: flex; flex-direction: column; align-items: center; padding: 50px 20px; }
        .header h1 { font-size: 32px; }
        .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; width: 100%; max-width: 1200px; }
        .card-container { perspective: 1200px; cursor: pointer; height: 250px; }
        .card { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 0.7s; border-radius: 16px; box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
        .card-container.flipped .card { transform: rotateY(180deg); }
        .card-face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; display: flex; flex-direction: column; box-sizing: border-box; border-radius: 16px; background-color: #fff; padding: 24px; }
        .card-back { background-color: #f0fff4; transform: rotateY(180deg); justify-content: space-between; }
        .card-category { font-size: 14px; color: #0052d9; margin-bottom: 8px; font-weight: 500; }
        .card-question { font-size: 20px; font-weight: 500; flex-grow: 1; display: flex; align-items: center; justify-content: center; text-align: center; }
        .card-answer-wrapper { flex-grow: 1; overflow-y: auto; }
        .card-answer { font-size: 15px; line-height: 1.7; }
        .card-footer { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 16px; margin-top: 16px; }
        .card-source { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 12px; margin-top: 12px; }
      </style>
    </head>
    <body>
      <div class="header">
        <h1>版本控制与Git工作流 - 学习卡片</h1>
      </div>
      <div class="grid-container">
        
    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">理论</div>
          <div class="card-question">版本控制系统主要分为哪三种类型？请简述它们各自的特点。</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">理论</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">版本控制系统分为三类：1. 本地版本控制系统（如 RCS），将文件历史记录保存在本地，无法处理复杂的多人协作；2. 集中式版本控制系统（如 Subversion），使用中央服务器存储所有版本，但网络问题会影响工作；3. 分布式版本控制系统（如 Git），每个开发者都拥有代码的完整副本，适合大规模团队协作。</div>
          </div>
          <div class="card-source">来源: 1.1 版本控制的类型</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">机制</div>
          <div class="card-question">Git管理文件时涉及哪三个主要区域？文件是如何在这些区域之间流转的？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">机制</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">Git的文件管理分为三个区域：工作区、暂存区和本地仓库。文件流转过程如下：1. 开发者在工作区（本地开发目录）修改文件；2. 使用 `git add` 命令将修改添加到暂存区；3. 使用 `git commit` 命令将暂存区的更改提交到本地仓库，形成历史记录。</div>
          </div>
          <div class="card-source">来源: 2.2 Git的工作区、暂存区和仓库</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">模式</div>
          <div class="card-question">请比较GitFlow工作流和功能分支工作流（Feature Branch Workflow）的主要区别。</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">模式</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">功能分支工作流的核心思想是每个功能开发都在独立的分支上进行，完成后再合并到主分支，以保证主分支的稳定性。GitFlow工作流则更为复杂，它不仅包含功能分支，还定义了多个长期分支（如 master, develop）和短期分支（如 release, hotfix），适用于具有明确版本发布和紧急修复需求的复杂项目。</div>
          </div>
          <div class="card-source">来源: 3.1 常见的Git工作流</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技术</div>
          <div class="card-question">在多人协作中，功能分支（Feature Branch）和修复分支（Hotfix Branch）各自的应用场景是什么？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技术</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">功能分支用于隔离开发新功能，每个开发者或小组在独立的功能分支上工作，完成后再合并到主干（如 develop 或 master）。修复分支则用于紧急修复主分支上的严重bug，修改完成后会合并回主分支。</div>
          </div>
          <div class="card-source">来源: 4.3 多人协作中的分支策略</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技术</div>
          <div class="card-question">与 `git merge` 相比，使用 `git rebase` 来合并分支有什么主要优点？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技术</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">`git rebase` 的主要优点是能够避免产生多余的合并提交（merge commit），从而使Git的提交历史更加简洁和线性。它会将当前分支的提交应用到目标分支的最新提交之上。</div>
          </div>
          <div class="card-source">来源: 5.3 使用Rebase避免合并提交</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">特性</div>
          <div class="card-question">在什么情况下开发者应该使用 `git stash` 命令？它的主要作用是什么？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">特性</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">当开发者需要中途切换到其他分支或任务，但当前工作目录中的修改尚未完成、不适合提交时，应该使用 `git stash`。它的作用是临时保存当前的修改状态，以便在切换回来后可以恢复工作现场。</div>
          </div>
          <div class="card-source">来源: 6.3 Git Stash</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">理论</div>
          <div class="card-question">分布式版本控制系统（如Git）相对于集中式版本控制系统（如Subversion）的关键优势是什么？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">理论</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">分布式版本控制系统（如Git）的关键优势在于每个开发者都拥有代码的完整副本（本地仓库）。这使得开发者可以在本地进行提交和版本管理，无需依赖网络连接到中央服务器，从而提高了工作效率和灵活性，尤其适合大规模团队协作。</div>
          </div>
          <div class="card-source">来源: 1.1 版本控制的类型</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">机制</div>
          <div class="card-question">当 `git merge` 发生冲突时，文档中描述的解决步骤是怎样的？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">机制</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">解决合并冲突的步骤如下：1. 通过 `git status` 查看冲突的文件；2. 手动打开并修改冲突文件，删除Git标记的冲突内容；3. 使用 `git add <file>` 命令将文件标记为已解决冲突；4. 提交合并结果以完成合并。</div>
          </div>
          <div class="card-source">来源: 5.2 解决合并冲突</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">特性</div>
          <div class="card-question">`git cherry-pick` 命令的功能是什么？它与分支合并（merge）有何不同？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">特性</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">`git cherry-pick` 命令允许开发者选择某一个特定的提交，并将其从一个分支复制应用到当前分支。它与分支合并的不同之处在于，合并是将一个分支的所有提交都集成过来，而 `cherry-pick` 只是针对性地应用单个或少数几个提交。</div>
          </div>
          <div class="card-source">来源: 6.2 Git Cherry-pick</div>
        </div>
      </div>
    </div>

      </div>
    </body>
    </html>
